<!-- 页脚 -->
<template>
    <footer>
        <div class="fullW">
          <div class="left">
            <div class="logo" v-if="footerData.logo">
              <img class="img" :src="footerData.logo.img" alt="">
              <div class="logoName">{{footerData.logo.name  }}</div>
            </div>
            <div class="info">
              <div v-for="(item,index) in footerData.info" :key="index">
                <el-image class="img" :src="item.img"/>{{ item.name }}
              </div>
            </div>
          </div>
          <div class="hyperlink">
              <div class="cell" v-for="(item,index) in footerData.router">
                  <div class="title">{{item.name}}</div>
                  <div class="list">
                      <NuxtLink v-for="(ch,i) in item.children" :key="i" :to="ch.href">{{ ch.name }}</nuxtLink>
                  </div>
              </div>
          </div>
        </div>
        <div class="fullW copyright">
          <span v-for="(item,i) in footerData.copyright" :key="i" :to="item.href" @click="linkTo(item.href)">{{ item.name }}</span>
        </div>

    </footer>
</template>

<script>
// import footerData from '@/static/data/footer.json'
import { ALI_API } from '@/utils'
export default {
  data() {
    return {
      footerData:{}
    }
  },
  mounted() {
    this.fetchData()
  },
  methods:{
   async fetchData(){
      const response = await fetch(`${ALI_API}/kyb_office/footer.json`)
      this.footerData = await response.json()
    },
    linkTo(href){
      if(href){
        if(href.startsWith('http')){
          window.open(href)
        }else{
          this.$router.push(href);
        }
      }
    },
  }
}
</script>
<style lang='scss' scoped>
@import '@/assets/css/variables.scss';
footer {
    background-color: #0F0F0F;
    padding-top:64px;
    color: #fff;

    .fullW{
      display: flex;
    }

    .left{
      width: 450px;
      margin-right: 160px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .logo{
        margin-bottom: 48px;
        .img{
          width: 156px;
          margin:16px 12px 20px;
        }
        .logoName{
          font-size: 18px;
          font-weight: 600;
        }
      }
      .info{
        font-size: 16px;
        line-height:24px;
        text-align: left;
        >div{
          padding: 8px 0;
        }
        .img{
          width:24px;
          height: 24px;
          margin-right: 16px;
          vertical-align: middle;
        }
      }
    }

    .hyperlink{
      display: flex;
      .cell{
        margin-right: 120px;
        .title{font-size: 20px;color: #fff;}
        .list{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            a{
                color:$use-color-info-light-4;
                font-size: 14px;
                margin: 8px 0;
            }
        }
      }
    }

    .copyright{
      border-top: 1px solid #265267;
      margin-top: 36px;
      padding-top: 24px;
      padding-bottom: 52px;
      span{
          color:#75919E;
          font-size: 14px;
          margin-right: 24px;
          cursor: pointer;
      }
    }
}
</style>
